<template>
	<view class="root-box root-container root-page-top">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="小区用户" />
				<view class="content">
					<uv-search inputAlign="left" :showAction="false" :placeholder="placeholderTxt"
					 v-model="keyWordVal" @change="onSearchChange"></uv-search>
					<view class="user-num">
						小区用户({{userTotalNum}})
					</view>
				</view>
			</template>

			<view class="loop-container" v-for="(item,index) in dataList" :key="item.id">
				<view class="loop-item-box">
					<view class="loop-item-box-text">
						注册时间:{{item.create_time}}
					</view>
					<view class="loop-item-box-text">
						手机号:{{item.phone_number}}
					</view>
					<view class="loop-item-box-text">
						真实姓名:{{item.nickname}}
					</view>
					<view class="loop-item-box-text">
						绑定小区:{{item.community_name}}
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'



	import {
		agentUserList
	} from '@/api/other.js'
	import {
		navigate
	} from '@/util/tools.js';

	const dataList = ref([])
	const paging = ref(null)

	const placeholderTxt = ref('请输入小区名称')
	

	const userTotalNum=ref(0)
	const keyWordVal = ref(null)
	const onSearchChange=()=>{
		paging.value.reload()
	}
	const queryList = (pageNo, pageSize) => {
		agentUserList({
			page: pageNo,
			limit: pageSize,
			keywords: keyWordVal.value
	    }).then(res => {
			userTotalNum.value=res.result.total
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
	
	
	const init = async () => {

	}
	init()
</script>

<style lang="scss" scoped>
	.root-box {

		.content {
			padding: 30upx;
			box-sizing: border-box;

		}
	}

	.loop-item-box {
		margin-top: 20upx;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 20upx 20upx 20upx 20upx;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx #cccccc;
	}

	.loop-item-box-text {
		margin-top: 10upx;
		font-size: 20upx;
		color: #666;

	}

	.user-num {
		margin-top: 20upx;
		font-size: 24upx;
		color: #666;
		font-weight: 600;
	}
</style>